<template>
	<view class="page_cont">
		<view class='banner_box' id="banner">
			 <swiper class='swiper' :current="current" @change="swiperChange">
			 	<swiper-item class='item' v-for="(item,index) in banners" :key="index">
			 		<image class='img' :src="item" mode="aspectFill"></image>
			 	</swiper-item>
			 </swiper>
			<view class="indication">
				<block v-for="(item,index) in banners" :key="index">
					<view class="spot" :class="current==index?' active':''"></view>
				</block>
			</view>
		 </view>
		 <view class="begin_btn" @click="begin_show()" v-if="current==2">开启新体验</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				banners: ['/static/guide1.png','/static/guide2.png','/static/guide3.png'],
				current: 0 
			}
		},
		methods:{
			swiperChange(e){
				this.current=e.detail.current
			},
			begin_show(){
				uni.switchTab({
					url: "/pages/index/index"
				})
				uni.setStorageSync("first",true)
			},
		}
	}
</script>

<style lang="scss">
	.page_cont{
		width: 100%;
		height: 100vh;
		position: relative;
		.banner_box{
			width: 100%;
			height: 100vh;
			.swiper{
				width: 100%;
				height: 100vh;
				.item{
					width: 100%;
					height: 100vh;
					text-align: center;
					.img{
						width: 100%;
						height: 100vh;
					}
				}
			}
			.indication{
				position: absolute;
				bottom: 230rpx;
				left: 0;
				right: 0;
				margin: auto;
				width: 400rpx;
				height: 8rpx;
				display:flex;
				flex-direction:row;
				align-items:center;
				justify-content:center;
			}
			.spot{
				width: 46rpx;
				height: 10rpx;
				// border-radius: 50%;
				margin-right: 16rpx;
				background: #EAEDF0;
				transition: all 0.3s;
			}
			.active{
				// width: 20rpx;
				// height: 8rpx;
				// border-radius: 4rpx;
				background: #3DC9BD;
			}
		}
		.begin_btn{
			position: absolute;
			bottom: 100rpx;
			left: 0;
			right: 0;
			width: 320rpx;
			margin: auto;
			height: 72rpx;
			text-align: center;
			line-height: 72rpx;
			border-radius: 40rpx;
			background: #3DC9BD;
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;
		}
	}
</style>
